<template>
	<div id="scene">
<el-row >
	<el-col :xs="{span: 24}" :sm="{span: 3}" :md="{span: 2, offset: 1}" :lg="{span: 2, offset: 5 }" id="sceneNav">
    	<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
      	<!-- <el-menu-item index="0">导航二</el-menu-item>
      	<el-menu-item index="1">导航三</el-menu-item>
      	<el-menu-item index="2">导航二</el-menu-item>
      	<el-menu-item index="3">导航三</el-menu-item> -->
        <el-menu-item index="index" v-for="(sceneDataItem,index) in sceneDataMenu" >
          <router-link :to="{ path: 'productList', query: { id: sceneDataItem.Id }}">{{sceneDataItem.option}} </router-link>
        </el-menu-item>
    </el-menu>
	</el-col>

  	<el-col :xs="{span: 24}" :sm="{span: 18, offset: 2}" :md="{span: 18, offset: 2}" :lg="{span: 12, offset: 1}">
  		<div class="sceneBanner">
  			<img src="../assets/scene/living.jpg">

  			<el-row>
  				<el-col :xs="{span: 24}" :sm="{span: 16, offset: 0}" :md="{span: 16, offset: 0}" :lg="{span: 16, offset: 0 }">
  					<p class="sceneText">
  						Artful end tables give this room some extra personality. Choose different size end tables for a fresh aesthetic.
  					</p>
  				</el-col>
  				<el-col :xs="{span: 24}" :sm="{span: 6, offset: 2}" :md="{span: 4, offset: 4}" :lg="{span: 4, offset: 4 }">
  				
                                            <label class="share-room">Share This Room:</label>
                                            <a class="share-room-bottom">
                                                <img src="../assets/scene/icon-facebook.png">
                                            </a>
                                            <a class="share-room-bottom">
                                                <img src="../assets/scene/icon-instagram.png">
                                            </a>
                                            <a class="share-room-bottom">
                                                <img src="../assets/scene/icon-pinterest.png">
                                            </a>
                                       
  				</el-col>
  			</el-row>

  		</div>
   		
  	</el-col>
  
</el-row>

</div>
</template>

<script>
	export default{
  		name: 'scene',
      data () {
        return {
          sceneDataMenu:[],
         /* scentId: this.$route.query.id,
          screenWidth: document.body.clientWidth,*/
          sceneNavContentWidth:0,
        }
      },
      mounted () {
        this.sceneData();
        this.getRouteId(); 
        this.windowWidth();
        this.sceneNavWidth();

        
      },
      computed: {
        scentId () {
         return this.$route.query.id;
       },
       screenWidth () {
         return document.body.clientWidth;
       }
     },
  		methods: {
       	 	handleOpen(key, keyPath) {
      	    	console.log(key, keyPath);
      		},
      		handleClose(key, keyPath) {
        		console.log(key, keyPath);
      		},
          sceneData: function() {
            let sceneNum = parseInt(this.scentId)+1;
            this.$http.get('static/data/sceneData'+sceneNum+'.json').then((response) => {
                    //this.$set( response)
                    // console.log(response)
                   this.sceneDataMenu = response.body;
                   //console.log(this.sceneDataMenu.length);
                   this.sceneNavContentWidth = this.sceneDataMenu.length;
                  //console.log(this.sceneNavContentWidth);
                   this.sceneNavWidth();
                  
                })
                .catch(function(response) {
                    console.log(response)
                })
          },
          getRouteId:function(){
            this.scentId = this.$route.query.id
            console.log(this.scentId);
             console.log("scene"+this.$store.state.count);
          },
          windowWidth: function(){
            window.localStorage.setItem("windowWidth",this.screenWidth);
          },
          sceneNavWidth: function(){
            document.querySelector('.el-menu-vertical-demo').style.width = "auto";
          }
    	},
      watch:{
        scentId: function (val, oldVal) {
          //console.log("嗯"+'new: %s, old: %s', val, oldVal)
          this.sceneData();
          this.sceneNavWidth()
        }
      }
	}
</script>

<style>
	#scene .el-menu-item{
		width:100%;
		height: 40px;
    line-height: 40px;
    text-align: left;
	}
	.el-menu-item:first-child,#scene .el-menu-item {
     margin-left: 20px; 
	}
	.sceneBanner img{
		width:100%;
	}
	.el-menu-item:hover {
    	background-color: #fff;
    	color: #d85d4b;
    	position: relative;
	}
	#scene .el-menu-item:hover:before{
		    position: absolute;
    content: " ";
    width: 5px;
    background-color: #d85d4b;
    height: 25px;
    top: 7px;
    margin-left: -15px;
	}
	.sceneText{
		text-align: left;
		margin-top: 16px;
	}
	.share-room-bottom {
    display: inline-block;
    margin: 5px 3px 0 10px;
    width: 24px;
    height: 24px;
	}
	.share-room{
	width:100%;
	margin-top: 16px;
	}


@media (max-width: 767px){
	.el-menu-item:first-child, #scene .el-menu-item {
    margin-left: 0px;
    margin-right: 0;
}
  #sceneNav{
    position: fixed;
    top: 52px;
    height: 40px;
    overflow-x: auto;
    background: #fff;
    z-index: 1;
    border-bottom:1px solid #ccc;
    overflow-y: hidden;
  }
  #scene .el-menu-item {
    width: 95px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    float: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

}
  #scene .el-menu-vertical-demo{
    overflow-x: auto;
  }
  #scene .sceneBanner{
    padding: 0 8px
  }
}
	
</style>